<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉级联</title>
</head>
<body>
    <select name="" id="sel01">
        <option value="-1">--- 选择省份 ---</option>
        <option value="hn">湖南</option>
        <option value="hb">湖北</option>
        <option value="bj">北京</option>
    </select>
    <select name="" id="sel02">
        <option value="-1">--- 选择城市 ---</option>
    </select>
    <select name="" id="sel03">
        <option value="-1">--- 选择地区 ---</option>
    </select>
    <script>
        // 根据id值获得元素
        let $=function(id){
            return document.getElementById(id);
        }
        //准备数据
        let citys={
            'hn':[new Option('--- 选择城市 ---','-1'),new Option('长沙','cs'),new Option('湘潭','xt'),new Option('浏阳','ly')],
            'hb':[new Option('--- 选择城市 ---','-1'),new Option('黄岗','hg'),new Option('武汉','wh') ],
            'bj':[new Option('--- 选择城市 ---','-1'),new Option('朝阳区','cyq'),new Option('海淀区','hdq') ]
        };

        //为select绑定onchange事件
        //当失去焦点同时内容改变时，触发onchange事件。
        $('sel01').onchange=function(){
            //this指向的就是当前的select对象。document.getElementById('sel01')等价
            console.log(this.options,this.options.selectedIndex);
            //获得当前所选的选项的下标
            let index=this.options.selectedIndex;
            //获得所选择的选项
            let option= this.options[index];
            console.log(option.value,option.text);
            //获得对应的城市信息
            let arr=citys[option.value];
            console.log(arr);
            //强制将sel02对应的option全部清除
            $('sel02').options.length=0;
            for(let i=0;i<arr.length;i++){
                $('sel02').options[i]=arr[i];
            }
         }
    </script>
</body>
</html>